<template>
	<view class="loadingWrap">
		<slot>loading...</slot>
		<view class="loadingIcons">
			<text class="dot"></text>
			<text class="dot"></text>
			<text class="dot"></text>
			<text class="dot"></text>
			<text class="dot"></text>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		props: {
			
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.loadingWrap{
		color: white;
		font-size: 25rpx;
		.loadingIcons{
			position: relative;
			left: -6rpx;
			top: -120rpx;
			.dot{
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background-color: #ffffff;
				position: absolute;
				animation: roll 5s linear infinite;
				transform-origin: 12rpx 100rpx;
				transform: rotate(0deg);
			}
			.dot:nth-child(2){
				animation-delay: 0.3s;
			}
			.dot:nth-child(3){
				animation-delay: 0.6s;
			}
			.dot:nth-child(4){
				animation-delay: 0.9s;
			}
			.dot:nth-child(5){
				animation-delay: 1.2s;
			}
			
		}
	}
	@keyframes roll{
		0%{
			transform: rotate(0deg);
			opacity: 1;
		}
		7%{
			transform: rotate(60deg);
		}
		14%{
			transform: rotate(120deg);
		}
		30%{
			transform: rotate(180deg);
		}
		50%{
			transform: rotate(240deg);
		}
		59%{
			transform: rotate(300deg);
		}
		66%{
			transform: rotate(360deg);
		}
		75%{
			transform: rotate(360deg);
			opacity: 1
		}
		76%{
			transform: rotate(360deg);
			opacity: 0
		}
		100%{
			transform: rotate(360deg);
			opacity: 0
		}
	}
</style>
